<script setup>
import { GetWidgetInfo, SetWidgetInfo } from '@/api/lightingArea/index'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
import { onMounted, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const language = ref('') // json数据

// 组件相关数据
const mode = ref('auto') // 手自动模式
const lightingMode = ref('all') // 公共照明模式
const timeRangeValues = ref({}) // 存储每个时间范围的值

// API返回的数据
const lightingAreaData = ref(null)
const timeRangesArray = ref([])
const autoManualOptions = computed(() => {
  if (!lightingAreaData.value) return []
  return [
    { label: lightingAreaData.value.autoManualTrueText, value: 'true' },
    { label: lightingAreaData.value.autoManualFalseText, value: 'false' },
  ]
})
const modeOptions = computed(() => {
  if (!lightingAreaData.value?.modeValueTags) return []
  return Object.entries(lightingAreaData.value.modeValueTags).map(([key, value]) => ({
    label: value,
    value: key,
  }))
})

onMounted(() => {
  getDetail()
  getLanguage()
})
const getLanguage = () => {
  if (sessionStorage.langSort && sessionStorage.language) {
    // 如果有数据，则需要从session中取
    language.value = JSON.parse(sessionStorage.language)
  } else {
    // 没有数据的话，直接走本地的中文翻译
    if (sessionStorage.langSort == 'en') {
      language.value = 'en'
    } else {
      // language = language_zh
      language.value = 'en'
    }
  }
}
const getDetail = () => {
  // 从URL中获取name参数
  const urlParams = new URLSearchParams(window.location.search)
  const name = urlParams.get('name')

  GetWidgetInfo({ name, blockType: 'LightingArea' }).then((res) => {
    //console.log(res)
    //console.log('URL中的name参数:', name)

    if (res && res.lightingArea) {
      lightingAreaData.value = res.lightingArea

      // 设置手自动模式
      mode.value = res.lightingArea.autoManualValue

      // 设置照明模式
      lightingMode.value = res.lightingArea.modeValue.toString()

      // 设置时间范围 - 直接使用数组格式
      if (res.lightingArea.timeRanges) {
        const timeRanges = res.lightingArea.timeRanges

        // 直接映射数组，添加 Date 对象，保持原始顺序
        timeRangesArray.value = timeRanges.map((item) => ({
          ...item,
          startTime: new Date(2024, 0, 1, item.startHour, item.startMinute),
          endTime: new Date(2024, 0, 1, item.endHour, item.endMinute),
        }))
      }
    }
  })
}

const handleCancel = () => {
  // 取消逻辑
  //console.log('取消操作')
}

const handleConfirm = () => {
  // 处理确认逻辑 - 组装成lightingArea格式
  const timeRangesData = []
  timeRangesArray.value.forEach((item) => {
    timeRangesData.push({
      startHour: item.startTime?.getHours() || 0,
      startMinute: item.startTime?.getMinutes() || 0,
      endHour: item.endTime?.getHours() || 0,
      endMinute: item.endTime?.getMinutes() || 0,
    })
  })

  const formData = {
    lightingArea: {
      autoManualValue: mode.value,
      modeValue: parseInt(lightingMode.value),
      timeRanges: timeRangesData,
    },
    name: lightingAreaData.value.name,
    blockType: 'LightingArea',
  }
  SetWidgetInfo(formData).then((res) => {
    //console.log('设置成功', res)
    ElMessage.success('配置保存成功')
  })
}
</script>

<template>
  <el-config-provider :locale="zhCn">
    <div class="iframe-container">
      <!-- 内容区域 -->
      <div class="iframe-content">
        <div class="content-scroll">
          <!-- 手自动模式切换 -->
          <div class="mode-section">
            <div class="section-label">手自动模式切换</div>
            <el-radio-group v-model="mode" class="radio-group">
              <el-radio
                v-for="option in autoManualOptions"
                :key="option.value"
                :label="option.value"
              >
                {{ option.label }}
              </el-radio>
            </el-radio-group>
          </div>

          <!-- 公共照明 -->
          <div class="lighting-section">
            <div class="section-label">公共照明</div>
            <el-radio-group v-model="lightingMode" class="lighting-radio-group">
              <el-radio v-for="option in modeOptions" :key="option.value" :label="option.value">
                {{ option.label }}
              </el-radio>
            </el-radio-group>
          </div>

          <!-- 执行时间 -->
          <div class="time-section">
            <div class="section-label">执行时间</div>
            <div class="time-scroll-container">
              <div v-for="(timeRange, index) in timeRangesArray" :key="index" class="time-range">
                <el-time-picker
                  v-model="timeRange.startTime"
                  format="HH:mm"
                  :placeholder="`${String(timeRange.startHour).padStart(2, '0')}:${String(timeRange.startMinute).padStart(2, '0')}`"
                  :prefix-icon="null"
                  :clearable="false"
                  class="time-picker"
                />
                <span class="time-separator">to</span>
                <el-time-picker
                  v-model="timeRange.endTime"
                  format="HH:mm"
                  :placeholder="`${String(timeRange.endHour).padStart(2, '0')}:${String(timeRange.endMinute).padStart(2, '0')}`"
                  :prefix-icon="null"
                  :clearable="false"
                  class="time-picker"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="iframe-footer">
        <!-- <el-button @click="handleCancel" class="cancel-btn">取消</el-button> -->
        <el-button type="primary" @click="handleConfirm" class="confirm-btn">保存</el-button>
      </div>
    </div>
  </el-config-provider>
</template>
<style>
.el-input__prefix {
  display: none !important;
}

:root {
  --el-date-editor-width: 120px !important;
  /* --el-color-primary: #606266; */
}
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  width: 80px;
}
</style>
<style scoped>
.iframe-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 0.5rem; /* 8px / 16 = 0.5rem */
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.1); /* 2px, 12px */
  display: flex;
  flex-direction: column;
}

.iframe-header {
  padding: 0.9375rem 1.25rem; /* 15px, 20px */
  /* background-color: #f8f8f8; */
  border-bottom: 0.0625rem solid #e4e7ed; /* 1px */
  font-size: 1rem; /* 16px */
  font-weight: normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.5rem 0.5rem 0 0; /* 8px */
}

.close-btn {
  padding: 0;
  color: #909399;
}

.close-btn:hover {
  color: #409eff;
}

.iframe-content {
  flex: 1;
  overflow: hidden;
  /* background-color: #f8f8f8; */
  display: flex;
  flex-direction: column;
}

.content-scroll {
  padding: 1.25rem; /* 20px / 16 = 1.25rem */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-label {
  display: block;
  font-size: 0.875rem; /* 14px / 16 = 0.875rem */
  font-weight: 500;
  color: #333;
  margin-bottom: 0.75rem; /* 12px / 16 = 0.75rem */
}

.radio-group,
.lighting-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem; /* 20px / 16 = 1.25rem */
}

.radio-group .el-radio,
.lighting-radio-group .el-radio {
  margin-right: 0;
}

/* :deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #333;
  border-color: #333;
} */

:deep(.el-radio__inner) {
  width: 1rem; /* 16px / 16 = 1rem */
  height: 1rem; /* 16px / 16 = 1rem */
  border: 0.125rem solid #dcdfe6; /* 2px / 16 = 0.125rem */
}

:deep(.el-radio__inner::after) {
  width: 0.375rem; /* 6px / 16 = 0.375rem */
  height: 0.375rem; /* 6px / 16 = 0.375rem */
  background-color: #fff;
}

.time-section {
  border-top: 0.0625rem solid #e4e7ed; /* 1px / 16 = 0.0625rem */
  padding-top: 1.25rem; /* 20px / 16 = 1.25rem */

  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}

.time-scroll-container {
  overflow-y: auto;
  padding-right: 0.25rem; /* 4px / 16 = 0.25rem - 为滚动条留出空间 */
}

.time-range {
  display: flex;
  align-items: center;
  margin-bottom: 0.9375rem; /* 15px / 16 = 0.9375rem */
  flex-wrap: wrap;
  gap: 0.5rem;
}

.time-picker {
  flex: 1;
  min-width: 6.25rem; /* 100px / 16 = 6.25rem */
  max-width: 7.5rem; /* 120px / 16 = 7.5rem */
}

.time-separator {
  margin: 0 0.9375rem; /* 15px / 16 = 0.9375rem */
  color: #666;
  font-weight: normal;
}

.iframe-footer {
  padding: 1.25rem; /* 20px / 16 = 1.25rem */
  border-top: 0.0625rem solid #e4e7ed; /* 1px / 16 = 0.0625rem */
  /* background-color: #f8f8f8; */
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem; /* 12px / 16 = 0.75rem */
  border-radius: 0 0 0.5rem 0.5rem; /* 8px / 16 = 0.5rem */
  flex-wrap: wrap;
}

:deep(.el-radio__label) {
  font-size: 0.875rem; /* 14px / 16 = 0.875rem */
}

:deep(.el-checkbox__label) {
  font-size: 0.875rem; /* 14px / 16 = 0.875rem */
}

.cancel-btn {
  background-color: white;
  border: 0.0625rem solid #dcdfe6; /* 1px / 16 = 0.0625rem */
  color: #606266;
}

.cancel-btn:hover {
  border-color: #c0c4cc;
  color: #409eff;
}

.confirm-btn {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
}

.confirm-btn:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>
